import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import EditPage from '@/components/EditPage';
import StandardTable from '@/components/StandardTable';
import DetailPage from '@/components/DetailPage';
import {
    formItemFragement,
} from '@/utils/common';

@connect(({ loading, component }) => ({
    dictObject: component.dictObject,
    loading: loading.effects['Archives/selectDriverAdd'],
}))
export default class DriverAdd extends Component {
    state = {
        detailId: '',
        archivesId: '',
        driverWage: {},
        driverBillOil: [],
        driverTrainDetail: []
    }
    componentDidMount() {
        const { id, dispatch, archivesId } = this.props
        this.setState({ detailId: id, archivesId })
        dispatch({
            type: 'Archives/selectDriverAdd',
            payload: {
                id,
                archivesId,
            },
            callback: (data) => {
                this.getDriverAdd(data)
            }
        })
    }

    getDriverAdd = (data) => {
        const { driverWage, driverBillOil, driverTrainDetail, driverOilTotal: {
            totalMileage,
            totalOilAmount,
            totalSaveFuel,
            totalStandardOilAmount
        } } = data
        let oilList = driverBillOil
        oilList.push({
            id: '0',
            totalOilAmount: '',
            totalMileage: '',
            trainNo: '',
            weight: '总计',
            travelMileage: totalMileage,
            standardOil: '',
            standardOilAmount: totalStandardOilAmount,
            oilAmount: totalOilAmount,
            saveFuel: totalSaveFuel,
            driverCount: '',
            avgSaveFuel: ''
        })
        this.setState({
            driverWage,
            driverBillOil: oilList,
            driverTrainDetail
        })
    }

    oilCountColumn = [
        {
            title: '总油耗',
            dataIndex: 'totalOilAmount',
            width: 60,
            render: (value, _, index) => this.rowSpanAll(value, index),
        },
        {
            title: '总里程',
            dataIndex: 'totalMileage',
            width: 80,
            render: (value, _, index) => this.rowSpanAll(value, index),
        },
        {
            title: '车次号',
            dataIndex: 'trainNo',
            width: 110,
        },
        {
            title: '重量（KG）',
            dataIndex: 'weight',
            width: 100,
        },
        {
            title: '里程',
            dataIndex: 'travelMileage',
            width: 100,
        },
        {
            title: '油耗标准',
            dataIndex: 'standardOil',
            width: 80,
            render: text => this.formateMoney(text)
        },
        {
            title: '标准油耗量',
            dataIndex: 'standardOilAmount',
            width: 100,
            render: text => this.formateMoney(text)
        },
        {
            title: '耗油量',
            width: 100,
            dataIndex: 'oilAmount',
        },
        {
            title: '奖励油量',
            dataIndex: 'saveFuel',
            width: 100,
            render: text => this.formateMoney(text)
        },
        {
            title: '司机数量',
            width: 80,
            dataIndex: 'driverCount',
        },
        {
            title: '人均节省油量',
            dataIndex: 'avgSaveFuel',
            render: text => this.formateMoney(text)
        },
    ]


    detailColumn = [
        {
            title: '车次号',
            dataIndex: 'trainNo',
            render: (value, _, index) => this.rowSpan3(value, index),
        },
        {
            title: '类型',
            dataIndex: 'type',
        },
        {
            title: '时效达标数',
            dataIndex: 'timeBasedBill',
            render: text => this.formateMoney(text)
        },
        {
            title: '里程绩效奖',
            dataIndex: 'mileageBill',
            render: text => this.formateMoney(text)
        },
        {
            title: '奖励油耗',
            dataIndex: 'oilBill',
            render: text => this.formateMoney(text)
        },
        {
            title: '压夜',
            dataIndex: 'nightBill',
            render: text => this.formateMoney(text)
        },
        {
            title: '短驳补助',
            dataIndex: 'shortBill',
            render: text => this.formateMoney(text)
        },
        {
            title: '节假日津贴',
            dataIndex: 'holidayBill',
            render: text => this.formateMoney(text)
        },
        {
            title: '总计',
            dataIndex: 'totalBill',
            render: text => this.formateMoney(text)
        },
    ]

    rowSpanAll = (value, index) => {
        const obj = {
            children: value,
            props: {},
        };
        if (index === 0) {
            obj.props.rowSpan = this.state.driverBillOil.length - 1;
        } else if (this.state.driverBillOil.length - 1 !== index) {
            obj.props.rowSpan = 0
        }
        return obj;
    }

    rowSpan3 = (value, index) => {
        const obj = {
            children: value,
            props: {},
        };
        if (index % 3 === 0) {
            obj.props.rowSpan = 3
        } else {
            obj.props.rowSpan = 0
        }
        return obj;
    }

    formateMoney = (money) => {
        if (money) {
            return Number(money).toFixed(2)
        } else {
            return ''
        }
    }

    render() {
        const { loading } = this.props
        const editPageParams = {
            panelValue: [
                { key: '司机提成' },
                { key: '油耗计算' },
                { key: '车次明细' },
            ]
        };
        const { driverWage, driverBillOil, driverTrainDetail } = this.state
        const formItem = [
            [
                <DetailPage label="工号" value={driverWage.workerNo} />,
                <DetailPage
                    label="司机"
                    value={driverWage.driverName}
                />
            ],
            [
                <DetailPage
                    label="时效达标数"
                    value={driverWage.timeBased}
                />,
                <DetailPage label="时效奖金额" value={this.formateMoney(driverWage.timeAward)} />,
            ],
            [

                <DetailPage
                    label="行驶里程"
                    value={driverWage.travelMileage}
                />,
                <DetailPage label="里程绩效奖" value={this.formateMoney(driverWage.mileagePerformance)} />,
            ],
            [

                <DetailPage
                    label="奖励油量"
                    value={driverWage.saveFuel}
                />,
                <DetailPage label="油耗奖" value={this.formateMoney(driverWage.rewardOilFee)} />,
            ],
            [

                <DetailPage
                    label="压夜天数"
                    value={driverWage.nightDays}
                />,
                <DetailPage label="压夜补助" value={this.formateMoney(driverWage.pressureAmount)} />,
            ],
            [

                <DetailPage
                    label="短驳车次"
                    value={driverWage.shortCount}
                />,
                <DetailPage label="短驳补助" value={this.formateMoney(driverWage.shortBargeSubsidies)} />,
            ],
            [

                <DetailPage
                    label="节假日天数"
                    value={driverWage.holidayDays}
                />,
                <DetailPage label="节假日津贴（元）" value={this.formateMoney(driverWage.holidaySubsidies)} />,
            ],
            [

                <DetailPage label="车次数" value={driverWage.trainCount} />,
                <DetailPage
                    label="总计"
                    value={this.formateMoney(driverWage.totalFee)}
                />
            ],
        ]
        return <EditPage {...editPageParams}>
            <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
            <Fragment>
                <StandardTable
                    disabledRowSelected={true}
                    loading={loading}
                    data={{ list: driverBillOil }}
                    columns={this.oilCountColumn}
                    pagination={false}
                    scrollX={1000}
                    className="table_info_total"
                />
            </Fragment>
            <Fragment>
                <StandardTable
                    disabledRowSelected={true}
                    loading={loading}
                    data={{ list: driverTrainDetail }}
                    columns={this.detailColumn}
                    scrollX={1000}
                    pagination={false}
                />
            </Fragment>
        </EditPage>
    }
}